<!--

This is a sample illustrating how to list, display and let the 
user edit the title and description for his albums.

-->
<style type='text/css'>
div#albummenu {
   position: absolute;
   width: 450px;
   height: 400px;
   border: 1px solid black;
   overflow: auto;
}
div#editform {
   margin-left: 480px;
   width: 300px;
   border: 1px solid black;
}
img.albumthumb {
   vertical-align: middle;
   border: 0px;
}
</style>

<div id='albummenu'>Loading...</div>
<div id='editform'>
   Select an album on the left and edit its title
   and description below. Hit 'Save' to commit the change.<hr />
   <table>
      <tr>
         <td>Album ID:</td>
         <td><input type='text' id='album_id' /></td>
      </tr>
      <tr>
         <td>Title:</td>
         <td><input type='text' id='album_title' /></td>
      </tr>
      <tr>
         <td>Description:</td>
         <td><input type='text' id='album_desc' /></td>
      </tr>
   </table>
   <button id='savebutton' onclick='window.onSaveButtonClicked()'>
      Save Changes
   </button><br />
   <span id='statusspan'>Ready.</span>
</div>

<script type='text/javascript'>

var albums = [];

function reloadAlbums() {
   var req = opensocial.newDataRequest();
   var idspec = opensocial.newIdSpec({'userId':'VIEWER'});
   req.add(req.newFetchAlbumsRequest(idspec),'albums');
   req.send(onLoadAlbums);
}

function onLoadAlbums(resp) {
   if (resp.hadError()) {
      debug.say("*** error: " + resp.getErrorMessage());
      try {
         debug.say("*** details: " + resp.get('albums').getErrorMessage());
      } catch (ex) {}
      return;
   }

   var html = [ "<ul>" ];

   debug.say("Response received successfully. Listing albums.");
   albums = resp.get('albums').getData().asArray();
   debug.say(albums.length + " albums returned.");
   for (var i in albums) {
      debug.say("Album ID " + albums[i].getId());

      var title = albums[i].getField(opensocial.Album.Field.TITLE);
      var desc = albums[i].getField(opensocial.Album.Field.DESCRIPTION);
      var itemcount = albums[i].getField(opensocial.Album.Field.MEDIA_ITEM_COUNT);
      var thumb = albums[i].getField(opensocial.Album.Field.THUMBNAIL_URL);

      html.push("<li>");
      html.push("<a href='javascript:void(0)' onclick='window.onAlbumClicked(");
      html.push(i + ")'>");
      html.push("<img class='albumthumb' src='" + thumb + "'>");
      html.push(title + " (" + itemcount + ")<br /></li>");
   }
   html.push("</ul>");
   document.getElementById('albummenu').innerHTML = html.join('');
}

window.onAlbumClicked = function(i) {
   if (i < 0 || i >= albums.length) return;
   document.getElementById('album_id').value = albums[i].getId();
   document.getElementById('album_title').value =
           albums[i].getField(opensocial.Album.Field.TITLE);
   document.getElementById('album_desc').value =
           albums[i].getField(opensocial.Album.Field.DESCRIPTION);
}

window.onSaveButtonClicked = function() {
   document.getElementById('savebutton').style.visibility = 'hidden';
   document.getElementById('statusspan').innerHTML = "Saving... Please wait...";

   var albumId = document.getElementById('album_id').value;
   var title = document.getElementById('album_title').value;
   var desc = document.getElementById('album_desc').value;

   var fields = [];
   fields[opensocial.Album.Field.TITLE] = title;
   fields[opensocial.Album.Field.DESCRIPTION] = desc;

   var idspec = opensocial.newIdSpec({'userId':'VIEWER'});
   var req = opensocial.newDataRequest();
   req.add(req.newUpdateAlbumRequest(idspec, albumId, fields),'update');
   req.send(onSavedAlbum);
}

function onSavedAlbum(resp) {
   if (resp.hadError()) {
      debug.say("*** Error!");
      document.getElementById('statusspan').innerHTML = "ERROR!";
      document.getElementById('savebutton').style.visibility = 'visible';
      return;
   }
   debug.say("Successfully updated.");
   document.getElementById('statusspan').innerHTML = "Saved successfully.";
   document.getElementById('savebutton').style.visibility = 'visible';

   // reload albums
   reloadAlbums();
}

gadgets.util.registerOnLoadHandler(reloadAlbums);
</script>
